<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鑫乐居——首页</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="css/map.css">
	<!--[if it IE 9]>
	<scritp src="html5shiv.js"></script>
	<script src="respond.min.js"></script>
	<![end if]-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5mTWjVwLB6jdCslx6CfeZudBVlQX5KKG"></script>
	<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map1"); 
      map.centerAndZoom(new BMap.Point(116.486284,39.915189),16);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"",title:"鑫乐居",imageOffset: {width:0,height:3},position:{lat:39.915908,lng:116.488655}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
  <script type="text/javascript">
    window.onload = function () {
      var ckf = document.getElementById('ckf');
      var okf = document.getElementById('okf');
      var kf = document.getElementById('kf');
      var sh = document.getElementById('sh');
      var cl = document.getElementById('cl');
      var mix = document.getElementById('mix');
      var ques = document.getElementById('ques');
      var lyb = document.getElementById('lyb');
      mix.onclick = function () {
        ques.style.display = "block";
        lyb.style.display = "none";
      }
      ques.onclick = function () {
        lyb.style.display = "block";
        ques.style.display = "none";
      }
      ckf.onclick = function () {
        okf.style.display = "block";
        kf.style.display = "none";
      }
      okf.onclick = function () {
        kf.style.display = "block";
        okf.style.display = "none";
      }
      cl.onclick = function () {
        zx.style.display = "none";
        if (zx.style.display = "none") {
          setInterval("zx.style.display = 'block'",5000);
        }
      }
      sh.onclick = function () {
        zx.style.display = "none";
        if (zx.style.display = "none") {
          setInterval("zx.style.display = 'block'",5000);
        }
      }
    }
  </script>
</head>
<body>
	<form action="">
		<div id="cont">
			<div id="head">
				<div class="logo"></div>
				<div class="tel">
					<div class="phone"></div>
					<span>400-160-140</span>
				</div>
				<div class="login">
					<span><a href="login.html">登录</a></span>
					<span><a href="zhuce.html">注册</a></span>
				</div>
				<div class="dh">
					<ul>
						<li class="li1"><a href="index.php">首页</a></li>
						<li class="li1"><a href="">产品介绍</a>
							<ul>
								<li><a href="erpcase.php">ERP产品</a><a href="o2ocase.php">O2O产品</a></li>
				
							</ul>
						</li>
						<li class="li1"><a href="success.php">成功案例</a></li>
						<li class="li1"><a href="zhaomu.php">渠道招募</a></li>
						<li class="li1"><a href="">行业动态</a></li>
						<li class="li1"><a href="">关于我们</a>
							<ul>
								<li><a href="gongsi.php">公司简介</a><a href="zhaona.php">招纳贤士</a><a href="map.php">联系我们</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div id="banner"></div>
			<div id="map">
				<div id="map1" style="width:900px;height:550px;border:#ccc solid 1px;font-size:12px">	
				</div>
				<div id="map2">
					<div class="map3">
						<div class="maptel"></div>
						<span class="tel1">客服电话</span>
						<span class="tel2">400-717-5588</span>
					</div>
					<div class="map4">
						<div class="maptel"></div>
						<span class="tel1">营销电话</span>
						<span class="tel2">4000-160-140</span>
					</div>
					<div class="map5">
						<div class="maptel"></div>
						<span class="tel1">公司地址</span>
						<span class="tel2">北京市朝阳区光华路4号东方梅地亚C座1505室</span>
					</div>
				</div>
			</div>
			<div id="foot">
				<span>Copyright  2010-2015 All Rights Reserved. 京ICP备15041059号-1 京公网安备11010502027337 北京瑞卓喜创科技发展有限公司版权所有</span>
				<div class="hui"></div>
			</div>
		</div>
    <div id="kf">
        <div class="kf1"></div>
        <div class="kf2">
          <span>鑫乐居顾问</span>
          <div class="kf5">
            <div class="kk1"></div>
            <span>鑫乐居</span>
          </div>
          <div class="kf6">
            <div class="kk1"></div>
            <span>客服5</span>
          </div>
          <div class="kf7">
            <div class="kk1"></div>
            <span>客服9</span>
          </div>
        </div>
        <div class="kf3" id="ckf"></div>
      </div>
      <div class="kf4" id="okf"></div>
      <!-- 定时咨询弹出框 -->
      <div id="zx">
        <div class="close" id="cl"></div>
        <p>欢迎您，有什么可以帮助您的么？公司顾问在线为您解答。</p>
        <div class="btn btn-default" id="sh">稍后再说</div>
        <div class="btn btn-info" id="now">现在咨询</div>
      </div>
      <div id="lyb">
        <div class="mix" id="mix"></div>
        <div class="form">
          <textarea name="texta" id="texta" cols="30" rows="10" class="are" placeholder="请再次输入留言内容，我们会尽快与您联系。" onmouseleave="textayz()" ></textarea>
          <div class="text1" >
            <div class="name">姓名</div>
            <input type="text" class="name1" placeholder="最多100个字符" name="username" id="username" onmouseleave="nameyz()">
          </div>
          <div class="text2">
            <div class="phone">电话</div>
            <input type="text" placeholder="请输入您的手机号码" class="phone1" name="phone" id="phone" onmouseleave="phoneyz()">
          </div>
          <div class="text3">
            <div class="address">地址</div>
            <input type="text" placeholder="最多100个字符" class="address1" name="address" id="address" onmouseleave="addressyz()">
          </div>
          <div class="text4">
            <div class="email">邮箱</div>
            <input type="text" placeholder="请输入合法邮箱名" class="email1" name="email" id="email" onmouseleave="emailyz()">
          </div>
          <input type="submit" name="submit" class="sub" value="提交" id="sub">
        </div>
      </div>
      <div id="ques"></div>
	</form>
</body>
<script type="text/javascript">

    var texta = document.getElementById('texta');
    var username = document.getElementById('username');
    var phone = document.getElementById('phone');
    var address = document.getElementById('address');
    var email = document.getElementById('email');
    var sub = document.getElementById('sub');
    var biaodan = document.getElementById('biaodan');
//只验证表单字段长度
    sub.onclick = function () {
      if (texta.value == "") {
        alert("留言内容不能为空！");
        biaodan.action = "";
      }else{
        biaodan.action = "form.php";
      }
    }
</script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map1"); 
      map.centerAndZoom(new BMap.Point(116.486284,39.915189),16);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"",title:"鑫乐居",imageOffset: {width:0,height:3},position:{lat:39.915908,lng:116.488655}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
</html>